因为业务的需要界面需要实现分页的功能,所以我就研究了一下如何利用mint-ui
自带的loadmore组件实现上拉加载更多功能。
首先在文件中引入组件
import {Indicator, Loadmore} from 'mint-ui';
参考了一下组件中的一些参数
bottomMethod 是上拉刷新执行的方法
bottomPullText 为 pull 时加载提示区域的文字 默认值为上拉刷新,一般我会定义为上拉加载更多
bottomAllLoaded 若为真,则 bottomMethod 不会被再次触发
然后在HTML中写法如下
<mt-loadmore :bottom-method="loadBottomUse"
:bottom-all-loaded="allUseLoad" :bottomPullText='bottomText'
ref="loadmore">
<div class="tab-list" v-for='item in useScoreLog'>
<div class="tab-list-top">
<span class="tab-name">{{item.remark}}</span>
<span class="tab-num">{{item.score}}</span>
</div>
<div class="tab-list-bottom">
<span class="tab-time">{{item.operateTime}}</span>
<span class="tab-class">{{item.recordTypeName}}</span>
</div>
</div>
</mt-loadmore>
js中写法如下
首先在data的方法中定义初始化加载中的数组getScoreLog,当前页数pageNo,是否加载allLoaded,上拉时加载的文字bottomText,初始化方法中的数量总数totalCount。
代码如下
data(){
return {
getScoreLog: [],
pageNo: 1,
allLoaded: false,
bottomText: '上拉加载更多...',
totalCount: '',
}
},
初始化方法如下
getData(){
this.$http.post(commonUrl + "/restful/", {
typeFlag: '1'
}).then(response => {
if (response.data.errcode == 0) {
this.getScoreLog = response.data.scoreLog;
this.totalGetCount = (response.data.recordCount + 9) / 10;
}
}, response => {
});
},
下面便是上拉加载更多的方法
loadBottom() {
this.pageNo += 1;
if (this.pageNo == this.totalGetCount) {
this.allLoaded = true;
}
setTimeout(() => {
this.$http.post(commonUrl + "/restful/", {
pageNo: this.pageNo,
typeFlag: '1'
}).then(response => {
if (response.data.errcode == 0) {
this.getScoreLog = this.getScoreLog.concat(response.data.scoreLog);
}
}, response => {
});
}, 1500);
},
这样就大功告成啦~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。